<template>
  <div id="sidenavbox">
    <div id="sidenav">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideNav",
};
</script>

<style lang="scss" scoped>
#sidenavbox {
  width: 301px;
  
}
#sidenav {
  display: block;
  position: fixed;
  width: 260px;
  padding-left: 10px;
  padding-right: 25px;
  padding-top: 10px;
  height: 100%;
  left: 0;
  @include background-color($bgcolor-white);
  @include sidenav-border-right(1px solid #dcdcdc)
}

#sidenav::-webkit-scrollbar {
  width: 0px;
}

#sidenav::-webkit-scrollbar-thumb {
  @include sidenav-scrollbar-thumb($bgcolor-gray)
}

#sidenav::-webkit-scrollbar-track {
  @include sidenav-scrollbar-tack($color-normal-blue)
}

.slide-fade-1-enter-active {
  transition: all 0.3s;
}

.slide-fade-1-leave-active {
  transition: all 0.3s;
}

.slide-fade-1-enter,
.slide-fade-1-leave-to {
  transform: translateX(-100px);
}

.open {
  margin: 0px;
  border-top: 1px solid #f3f8f6;
  margin-top: -2px;
}

.open li {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5%;
  padding-right: 10%;
  list-style: none;
  transition: all 0.3s;
  flex: 1;
}
.fade-left-enter-active {
  transition: all 0.2s ease;
}
.fade-left-leave-active {
  transition: all 0.2s ease;
}
.fade-left-enter, .fade-left-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  left: -100px;
  opacity: 0;
}
@media screen and (max-width: 1024px){
  #sidenavbox{
    display: none;
  }
}
</style>
